import React, { useEffect, useState } from 'react'
import { Box, AutoRollComponent } from '$components';
import { getName, getPhone } from '$utils';
import './style.less';

function CitySafty (props) {
   const { emengencyTab, emergencyList } = props;
   const tab_name = {
      yjwz: { name: '应急物资', subscript: "物资", img: 'supply', items: [{ key: 'street', name: '乡镇街道' }, { key: 'location', name: '仓库地址' }, { key: 'responsiblePerson', name: '联系人' }, { key: 'phone', name: '联系电话' }, { key: 'materialDescription', name: '物资数量' }] },
      xfjy: { name: '消防救援', subscript: "队伍", img: "fire", items: [{ key: 'teamName', name: '队伍名称' }, { key: 'supervisoryUnit', name: '主管单位' }, { key: 'emergencyContactPhone', name: '联系人' }, { key: 'emergencyContactPhone', name: '联系电话' }, { key: 'totalMembers', name: '总人数' }, { key: 'baseAddress', name: '驻地地址' }] },
      rmwzb: { name: '人民武装部', subscript: "队伍", img: "arm", items: [{ key: 'teamName', name: '队伍名称' }, { key: 'supervisoryUnit', name: '主管单位' }, { key: 'emergencyContactPhone', name: '联系人' }, { key: 'emergencyContactPhone', name: '联系电话' }, { key: 'totalMembers', name: '总人数' }, { key: 'baseAddress', name: '驻地地址' }] },
      yljy: { name: '医疗救援', subscript: "队伍", img: "medical", items: [{ key: 'teamName', name: '队伍名称' }, { key: 'supervisoryUnit', name: '主管单位' }, { key: 'emergencyContactPhone', name: '联系人' }, { key: 'emergencyContactPhone', name: '联系电话' }, { key: 'totalMembers', name: '总人数' }, { key: 'baseAddress', name: '驻地地址' }] },
      yjbns: { name: '应急避难场所', subscript: "场所", img: "refuge", items: [{ key: 'shelterName', name: '场所全称' }, { key: 'address', name: '场所地址' }, { key: 'eventType', name: '事件类型' }, { key: 'capacity', name: '容纳人数' }] },
   }

   const getContent = () => {
      return <div className='water_item_right_container'>
         {
            emergencyList[emengencyTab]?.map((s, index) => {

               return <div className='water_right_item'>
                  <div
                     // className='item_left'
                     style={{
                        width: 50, height: 50,
                        background: `url(/assets/images/homepage/fire/${tab_name[emengencyTab]?.img}.png) no-repeat`,
                        backgroundSize: '100% 100%'
                     }}></div>
                  <div className='item_right'>
                     {
                        tab_name[emengencyTab]?.items?.map(x => {
                           let value = s[x.key] || '--'
                           if (x.name == '联系人' && s[x.key]) {
                              if (x.key == 'emergencyContactPhone') {
                                 value = value.substring(0, value.length - 11)
                              }
                              value = getName(value)
                           } else if (x.name == '联系电话' && s[x.key]) {
                              if (x.key == 'emergencyContactPhone') {
                                 value = value.substring(value.length - 11, value.length)
                              }
                              value = getPhone(value)
                           }
                           return <div className='flex-row'>
                              <div className='item_right_left'>{x.name}</div>
                              <div className='item_right_right'>{value}
                                 {x.name.indexOf('人数') > -1 && <span style={{ marginLeft: 30 }}>人</span>}
                              </div>
                           </div>
                        })
                     }
                  </div>
                  <div className='position_bg'><div className='position_icon' /> <span>{tab_name[emengencyTab]?.subscript}{index + 1}</span> </div>
               </div>
            })
         }

      </div>
   }

   return <Box title={tab_name[emengencyTab]?.name} >
      <AutoRollComponent key={emengencyTab} canScroll={emergencyList[emengencyTab]?.length > 3} content={getContent()} divHeight={860} divId={`fire-left-bottom${emengencyTab}`} />
   </Box>
}

export default CitySafty;


